Skip to main content

什么是Vue

Vue是构建用户界面的 JavasScript 的 MVVM 框架。

那么到底什么是 MVVM​

Alternate text

  • M（Model）：数据层；例如 Vue2 实例中的 data
  • V（View）：视图（DOM）
  • VM（ViewModel）：Vue胶水层代码；它负责 监听数据的变化 和 视图的更新，同时也是 Model 数据 和 View 视图通信的一个桥梁
ACE 的理解

MVVM 又叫数据驱动视图，所以视图的改变源于数据的更新。

Alternate text

ACE 的理解

Vue 在实例化的过程中会对遍历传给 实例化对象选项中的 data选项 遍历其所有属性 并使用 Object.defineProperty 把这些属性全部转为 getter/setter。

ACE 的理解

Vue 最重要的两个 function 监听 Observer 和 编译 Compile

Observer​

  • Observer 基本干了什么事情
    • 劫持并监听所有属性
      • 在 Observer 函数中
    • 采用的方式
      • Vue2 Object.defineProperty
      • Vue3 new Proxy
vue2.6.7 Observer 的方法
export class Observer {
    value: any;
    dep: Dep;
    vmCount: number;

    constructor (value: any) {
        this.value = value
        // 一个 Dep 对象的实例，Watcher 和 Observer 之间的桥梁
        this.dep = new Dep()
        this.vmCount = 0
        // 把自身 this 添加到 value 的 __ob__ 属性上
        def(value, '__ob__', this)
        // 对 value 的类型进行判断
        if (Array.isArray(value)) {
            if (hasProto) {
                protoAugment(value, arrayMethods)
            } else {
                copyAugment(value, arrayMethods, arrayKeys)
            }
            this.observeArray(value)
        } else {
            this.walk(value)
        }
    }
}